<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.alert {
        padding: 20px;
        background-color: #f44336;
        color: white;
        opacity: 1;
        transition: opacity 0.6s;
        margin-bottom: 15px;
    }
    
    .alert.success {background-color: #4CAF50;}
    .alert.info {background-color: #2196F3;}
    .alert.warning {background-color: #ff9800;}
    
    .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .closebtn:hover {
        color: black;
    }</style>
</head>
<body>
    <h2>提示信息</h2>
<p>点击 "x" 关闭提示框。</p>
<div class="alert">
  <span class="closebtn">&times;</span>  
  <strong>危险!</strong> 危险操作提示。
</div>

<div class="alert success">
  <span class="closebtn">&times;</span>  
  <strong>成功!</strong> 操作成功提示。
</div>

<div class="alert info">
  <span class="closebtn">&times;</span>  
  <strong>提示!</strong> 提示信息修改等。
</div>

<div class="alert warning">
  <span class="closebtn">&times;</span>  
  <strong>警告!</strong> 提示当前操作要注意。
</div>
</body>
</html>
<script>

var close=document.getElementsByClassName('closebtn');
var i;
 for(let i=0;i<close.length;i++){
     close[i].onclick=function(){
        var div = this.parentElement;
        div.style.opacity='0'
        setTimeout(
            function(){
                setTimeout(function(){ div.style.display = "none"; }, 600)
            }
        )
     }
 }


</script>